<template>
  <div class="page-container" v-if="userStore?.syncInventory?.econtractFirstOpen === 1">
    <div class="quick-search">
      <div
        v-for="item in quickSearchData"
        :key="item.key.toString()"
        class="quick-search-item"
        :class="[item.checked ? 'quick-search-item-checked' : '']"
        @click="quickSearchClick(item)"
      >
        <div class="quick-search-item-label">{{ item.label }}</div>
        <div class="quick-search-item-value" :class="[item.checked ? 'quick-search-item-value-checked' : '']">{{ item.value }}</div>
      </div>
    </div>
    <list-searcher :searchList="searchList" v-model:searchForm="queryParam" @loadData="loadData" @reset="searcherReset" />
    <div class="table-summary-box">
      <div class="table-info">
        <span class="table-info-item">
          企业认证已消费金额：<span class="num">{{ unitVal(getCount?.companyConsumeAmount, '元') }}</span>
        </span>
        <span class="table-info-item">
          个人认证已消费金额：<span class="num">{{ unitVal(getCount?.personConsumeAmount, '元') }}</span>
        </span>
        <span class="table-info-item">
          账户余额：<span class="num">{{ unitVal(getCount?.accountBalance, '元') }}</span>
        </span>
        <span class="table-info-item" v-if="getCount?.chargeWay === 1">
          企业认证收费标准：<span class="num">{{ unitVal(getCount?.companyContractChargeAmount, '元') }}</span>
        </span>
        <span class="table-info-item" v-if="getCount?.chargeWay === 1">
          个人认证收费标准：<span class="num">{{ unitVal(getCount?.personContractChargeAmount, '元') }}</span>
        </span>
      </div>
      <a-alert>
        <template #icon>
          <icon-exclamation-circle />
        </template>
        扣费说明：个人/企业完成认证后，从账户余额中扣除对应的费用
      </a-alert>
    </div>
    <table-index :table="table" @loadData="loadData">
      <template #enterpriseName="{ record }">
        <span>{{ record.identType === 3 ? record.personName : record.companyName }}</span>
      </template>
      <template #identStatus="{ record }">
        <span>{{ record.identType === 2 ? record.companyIdentStatusName : record.personIdentStatusName }}</span>
        <span v-if="record.identStatus === 0">原因：{{ record.reason }}</span>
      </template>

      <template #orderCode="{ record }">
        <template v-if="record.orderCode">
          <a-link type="link" @click="() => onLink(record)" style="color: rgba(24, 144, 255, 1); text-decoration: underline">
            {{ record.orderCode }}
          </a-link>
        </template>
      </template>
    </table-index>
  </div>
  <div class="page-container" v-else>
    <div class="service-empty">
      <img class="service-empty-img" src="../../../../assets/service-empty.png" />
      <div class="service-empty-text"> 暂未开启电子合同服务，请联系我司工作人员 </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, computed, reactive, onMounted } from 'vue'

  import { unitVal } from '@/utils'
  import { useFetchTableDataApi, useTable } from '@/hooks/table'
  import { getContractAuthRecord, getContractAuthFee, getContractAuthRecordHeader, exportContractSignRecord } from '@/api/business/contract'
  import { usePageDict } from '@/hooks/useDict'
  import { useExport } from '@/hooks/list'
  import useNavigate from '@/hooks/useNavigate'
  import useUserStore from '@/store/modules/user'

  const userStore = useUserStore() as any
  userStore.setEpDetail()

  const { navigateTo } = useNavigate()

  const pageDict = usePageDict('systemParamDict')
  console.log(pageDict)

  const quickSearchData = ref<any>([])

  const quickSearchClick = (item: any) => {
    quickSearchData.value.forEach((i: any) => {
      i.checked = false
    })
    item.checked = true
    queryParam.identType = item.key[0]
    queryParam.identStatusList = [item.key[1]]
    loadData()
  }

  const queryParam = reactive<any>({
    createTimeRange: [],
    dateRange: [],
  })
  const searchList = computed(() => {
    return [
      {
        label: '认证类型',
        prop: 'identType',
        type: 'a-select',
        options: pageDict.identType,
      },
      {
        label: '认证状态',
        prop: 'identStatusList',
        type: 'a-select',
        options: pageDict.companyIdentStatus,
        attrs: {
          multiple: true,
        },
      },
      { label: '企业认证名称', prop: 'companyName', type: 'a-input', maxlength: 30 },
      { label: '个人认证名称', prop: 'personName', type: 'a-input', maxlength: 30 },
      { label: '联系手机号', prop: 'personPhone', type: 'a-input-number', maxlength: 30 },
      {
        label: '所属门店',
        prop: 'siteIdList',
        type: 'remote-select',
        attrs: {
          multiple: true,
          type: 'multiple_site_listBystaff',
        },
      },
      {
        label: '发起认证时间',
        prop: 'createTimeRange',
        type: 'i-range-picker',
        attrs: {
          showTime: true,
          timePickerProps: {
            defaultValue: ['00:00:00', '23:23:59'],
          },
        },
        change: (value = []) => {
          queryParam.startTimeStart = value[0]
          queryParam.startTimeEnd = value[1]
        },
      },
      {
        label: '完成认证时间',
        prop: 'dateRange',
        type: 'i-range-picker',
        attrs: {
          showTime: true,
          timePickerProps: {
            defaultValue: ['00:00:00', '23:23:59'],
          },
        },
        change: (value = []) => {
          queryParam.completeTimeStart = value[0]
          queryParam.completeTimeEnd = value[1]
        },
      },
      {
        label: '发起人',
        prop: 'startUserIdList',
        type: 'remote-select',
        attrs: {
          type: 'store_staff_useId_multiple',
        },
      },
      { label: '关联合同编号', prop: 'contractNo', type: 'a-input', maxlength: 30 },
      { label: '关联订单编号', prop: 'orderCode', type: 'a-input', maxlength: 30 },
    ]
  })

  const table = useTable({
    columns: [
      {
        title: '认证类型',
        dataIndex: 'identTypeName',
        fixed: 'left',
        width: 100,
      },

      {
        title: '企业/个人名称',
        dataIndex: 'enterpriseName',
        slotName: 'enterpriseName',
        width: 120,
      },
      {
        title: '联系手机号',
        dataIndex: 'personPhone',
        width: 120,
      },
      {
        title: '所属门店',
        dataIndex: 'siteName',
        width: 150,
      },
      {
        title: '关联合同编号',
        dataIndex: 'contractNo',
        width: 240,
      },
      {
        title: '关联订单编号',
        dataIndex: 'orderCode',
        slotName: 'orderCode',
        width: 240,
      },
      {
        title: '认证状态',
        dataIndex: 'identStatus',
        slotName: 'identStatus',
        width: 100,
      },
      {
        title: '收费标准',
        dataIndex: 'chargeAmount',
        unit: '元',
        width: 110,
      },
      {
        title: '发起认证时间',
        dataIndex: 'startTime',
        width: 170,
      },
      {
        title: '完成认证时间',
        dataIndex: 'completeTime',
        width: 170,
      },
      {
        title: '发起人',
        dataIndex: 'startName',
        fixed: 'right',
        width: 100,
      },
    ],
    buttons: [
      {
        mode: 'export',
        // permission: 'svms:finance:bill:violation.export',
        label: '导出',
        method: () => handleExport(),
      },
    ],
  })

  // 导出事件
  const handleExport = () => {
    useExport(exportContractSignRecord, queryParam)
  }

  const searcherReset = () => {
    quickSearchData.value.forEach((i: any) => {
      i.checked = false
    })
  }

  const onLink = (record: any) => {
    if (record.orderType == 1) {
      navigateTo(`/short-order/detail/${record.orderId}`, `${record.orderCode}-短租详情`)
    } else if (record.orderType == 2) {
      navigateTo(`/long-order/detail/${record.orderId}`, `${record.orderCode}-长租详情`)
    }
  }

  const loadData = useFetchTableDataApi(table, queryParam, getContractAuthRecord)

  const getCount = ref()
  onMounted(() => {
    loadData()
    getContractAuthFee({}).then((res) => {
      console.log(res, 'getContractAuthFee')
      const result = res.result
      quickSearchData.value = [
        {
          key: [2, 1],
          label: '企业完成认证总数',
          value: result.companyIdentCount.completeAllCount,
          checked: false,
        },
        {
          key: [3, 1],
          label: '个人完成认证总数',
          value: result.personIdentCount.completeAllCount,
          checked: false,
        },
        {
          key: [2, 2],
          label: '企业认证中',
          value: result.companyIdentCount.identInCount,
          checked: false,
        },
        {
          key: [3, 2],
          label: '个人认证中',
          value: result.personIdentCount.identInCount,
          checked: false,
        },
        {
          key: [2, 0],
          label: '企业认证失败',
          value: result.companyIdentCount.identFailCount,
          checked: false,
        },
        {
          key: [3, 0],
          label: '个人认证失败',
          value: result.personIdentCount.identFailCount,
          checked: false,
        },
      ]
    })

    getContractAuthRecordHeader(queryParam).then((res) => {
      console.log(res, 'getContractAuthRecordHeader')
      getCount.value = res.result
    })
  })
</script>

<style lang="less" scoped>
  .page-container {
    .service-empty {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 500px;

      &-img {
        width: 86px;
        height: 129px;
        margin-bottom: 27px;
      }

      &-text {
        font-size: 16px;
        font-weight: 400;
        color: #1d2129;
      }
    }
    .quick-search {
      display: flex;
      margin-bottom: 20px;

      &-item {
        width: 16%;
        height: 62px;
        padding: 9px 0 9px 16px;
        border-radius: 4px 4px 4px 4px;
        border: 1px solid #e5e8ef;
        cursor: pointer;

        &:hover {
          transform: scale(1.1);
          transition: transform 0.3s;
          position: relative;
          z-index: 999;
        }

        &-checked {
          background: #e8f3ff;
          border-radius: 4px 4px 4px 4px;
          border: 1px solid #1890ff;
        }

        &:nth-of-type(n + 2) {
          margin-left: 20px;
        }

        &-label {
          font-size: 12px;
          font-weight: 400;
          color: #4e5969;
        }

        &-value {
          font-size: 20px;
          font-weight: 600;
          color: #1d2129;

          &-checked {
            color: #1890ff;
          }
        }
      }
    }

    .table-summary-box {
      padding: 20px 20px;
      margin-bottom: 20px;
      background: #f7f8fa;

      .table-info {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
        &-item {
          margin-right: 20px;
          span {
            color: #1890ff;
          }
        }
      }
    }
  }
</style>
